<template>
  <a-card>
    <a-row :gutter="16" class="mb-16">
      <a-col :span="8" class="flex items-center">
        <span class="label">客户姓名：</span>
        <a-input class="flex-1" :max-length="100" allow-clear placeholder="请输入客户名称" v-model="customerName"
                 @pressEnter="search"/>
      </a-col>
      <a-col :span="8" class="flex items-center">
        <span class="label">联系方式：</span>
        <a-input class="flex-1" :max-length="100" allow-clear placeholder="请输入客户联系方式" v-model="customerPhone"
                 @pressEnter="search"/>
      </a-col>
      <a-col :span="8" class="flex items-center justify-between">
        <section class="flex items-center">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button class="ml-8" @click="reset">重置</a-button>
          <a class="ml-8" href="javascript:" @click="isUpOn">{{ isUp ? '收起' : '展开' }}</a>
        </section>
        <a-button v-if="$permissionJudge('CustomerCreate')" style="float: right" type="primary" icon="plus"
                  @click="$refs.createOrEdit.add()">新建
        </a-button>
      </a-col>
    </a-row>
    <a-row class="mb-16" :gutter="16" v-show="isUp">
      <a-col :span="8" class="flex items-center">
        <span class="label">证件类型：</span>
        <a-select class="flex-1" v-model="credentialType" allow-clear placeholder="请选择证件类型" @change="search">
          <a-select-option v-for="item in credentialsList" :value="item.value" :key="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8" class="flex items-center">
        <span class="label">证件号码：</span>
        <a-input class="flex-1" allow-clear placeholder="请输入证件号码" @pressEnter="search" v-model="customerCredentialNo"/>
      </a-col>
      <a-col :span="8" class="flex items-center">
        <span class="label">会员渠道：</span>
        <!-- <a-select class="flex-1" v-model="channelId" allow-clear placeholder="请选择会员渠道" @change="search">
          <a-select-option :value="0">平台下单</a-select-option>
          <a-select-option v-for="item in allChannel" :value="item.id" :key="item.id">
            {{ item.name }}
          </a-select-option> -->
		  <sourceChannel placeholder="请选择会员渠道"
		          v-model="channelId" isShow="true"
		          :options="{ allowClear: true }"
		          @change="search" class="flex-1 overflow-hidden" />
        </a-select>
      </a-col>
      <a-col :span="8" class="flex items-center mt-16">
        <span class="label">会员归属：</span>
		<newVendor   placeholder="请选择会员归属"
		        v-model="vendorId"
		        :options="{ allowClear: true }"
		        @change="search" class="flex-1 overflow-hidden"/>
       <!-- <a-select class="flex-1" v-model="vendorId" allow-clear placeholder="请选择会员归属" @change="search">
          <a-select-option :value="0">
            平台
          </a-select-option>
		  <newVendor   placeholder="请选择会员归属"
		          v-model="vendorId"
		          :options="{ allowClear: true }"
		          @change="search" class="flex-1 overflow-hidden"/>
         <a-select-option v-for="item in vendorList" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select> -->
      </a-col>
      <a-col :span="8" class="flex items-center mt-16">
        <span class="label">风险等级：</span>
        <a-select class="flex-1" v-model="customerLevel" allow-clear placeholder="请选择风险等级" @change="search">
          <a-select-option v-for="item in customerLevelEnums" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-table
      row-key="id"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
    >
      <!--<template #affiliationTitle>-->
      <!--归属-->
      <!--<a-tooltip title="标识该客户曾经在该服务商接受过服务">-->
      <!--<a-icon class="ml-3 error-hintf5222d" type="question-circle"/>-->
      <!--</a-tooltip>-->
      <!--</template>-->
      <template #member="val, data">
        <p class="mb-5">姓名：{{ data.name }}</p>
        <p class="mb-0">手机：{{ data.phone }}</p>
      </template>
      <template #credentials="val, data">
        <p class="mb-5" v-if="data.credentialTypeName">类型：{{ data.credentialTypeName }}</p>
        <p class="mb-0" v-if="data.credentialNo">号码：{{ data.credentialNo }}</p>
      </template>
      <template #licence="val, data">
        <p class="mb-5" v-if="data.driverLicenseTypeName">类型：{{ data.driverLicenseTypeName }}</p>
        <p class="mb-0" v-if="data.driverLicenseGetTime">期限：{{
            data.driverLicenseGetTime
          }}至{{ data.driverLicenseEffectiveTime }}</p>
      </template>
      <template #channelName="val,data">
        {{ data.channelId === 0 ? '平台下单' : val }}
      </template>
      <template #level="val, data">
        <a-badge v-if="data.resultStatus === 1" status="success" text="白名单"/>
        <section class="inline-flex items-center" v-else>
          <a-badge v-if="data.resultStatus === 5" status="error" text="黑名单"/>
          <a-badge v-else status="warning" :text="$utils.getEnumName(customerLevelEnums, data.resultStatus)"/>
          <a-tooltip>
            <section slot="title">
              <section>类型：{{ data.reportTypeNames.filter(e => e !== '-' && !!e).join(',') }}</section>
              <section class="my-8">原因：{{ data.blackListReason }}</section>
              <section>
                <a-tag :color="data.resultStatus === 5 ? 'black' : '#faad14'">
                  {{ $utils.getEnumName(customerLevelEnums, data.resultStatus) }}
                </a-tag>
              </section>
            </section>
            <a-icon v-if="data.blackListReason" class="ml-3 error-hintf5222d" type="question-circle"/>
          </a-tooltip>
        </section>
      </template>
      <template #action="val, data">
        <a v-if="$permissionJudge('CustomerUpdate')" @click.stop="$refs.createOrEdit.edit(data.id)" href="javascript:">修改</a>
        <a-divider class="mx-4" type="vertical"/>
        <a v-if="$permissionJudge('CustomerDelete')" @click.stop="delMemberInfo(data.id)" style="color: red"
           href="javascript:">删除</a>
        <a v-if="$permissionJudge('CustomerRiskLevelQueryManage')" class="block" href="javascript:;"
           @click="searchRisk(data)">查询风险</a>
        <a href="javascript:;" v-if="$permissionJudge('CustomerReportCreate')" class="block" @click="reportRisk(data)">举报风险</a>
      </template>
    </a-table>
    <CreateOrEdit ref="createOrEdit" :allChannel="allChannel" :credentialsList="credentialsList"
                  :drivingLicenseList="drivingLicenseList"
                  @search="search"></CreateOrEdit>
  </a-card>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import {getPageCustomerList, deleteMemberInfo, getAllChannel} from '@/api/memberInfo'
import {getAllVendors} from '@/api/vendor'
import { getVendor } from '@/api/store'
import newVendor from '@/components/vendor/vendor'
import CreateOrEdit from './CreateOrEdit'
import sourceChannel from '@/components/sourceChannel'
import moment from 'moment'

export default {
  name: 'MemberInfo',
  mixins: [tableMixins],
  components: {CreateOrEdit,newVendor,sourceChannel},
  data() {
    return {
      loading: false,
      customerName: undefined,
      customerPhone: undefined,
      customerCredentialNo: undefined,
      channelId: undefined,
      vendorId: undefined,
      credentialType: undefined,
      customerLevel: undefined,
      pageNum: 1,
      rowsNum: 10,
      columns: [
        {title: '会员', scopedSlots: {customRender: 'member'}},
        {title: '证件信息', scopedSlots: {customRender: 'credentials'}},
        {title: '驾照信息', scopedSlots: {customRender: 'licence'}},
        {dataIndex: 'createTime', title: '注册时间'},
        {dataIndex: 'channelName', align: 'center', title: '渠道', scopedSlots: {customRender: 'channelName'}},
        {
          dataIndex: 'vendorName',
          align: 'center',
          title: '归属',
          customRender: (text, data) => data.vendorId === 0 && !text ? '平台' : text
        },
        {dataIndex: 'level', align: 'center', title: '风险等级', scopedSlots: {customRender: 'level'}},
        // {dataIndex: 'affiliation',align: 'center', slots: { title: 'affiliationTitle' }},
        // {dataIndex: 'isBlockList', align: 'center', title: '拉黑', scopedSlots: {customRender: 'isBlockList'}},
        {width: 120, align: 'center', title: '操作', scopedSlots: {customRender: 'action'}}
      ],
      data: [],
      credentialsList: [],//证件类型
      customerLevelEnums: [],
      isUp: false,
      confirmLoading: false,
      allChannel: [],
      vendorList: [],
      drivingLicenseList: []  //驾照类型
    }
  },
  async created() {
    this.getData()
    // this.$utils.getChannel().then(res => {
    //   this.allChannel = res
    //   console.log(res);
    // })
    this.customerLevelEnums = await this.$utils.getDictList('CustomerLevel')
    //证件
    this.credentialsList = await this.$utils.getDictList('CredentialType')
    //驾照
    this.drivingLicenseList = await this.$utils.getDictList('DriverLicenseType')
  },
  methods: {
    delMemberInfo(id) {
      this.$confirm({
        title: '请确认删除会员信息',
        content: '请确认是否删除会员信息？删除该会员后直到下次该会员再次使用该服务前，都将无法获取该会员信息。请问您确认删除该会员信息吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          if (this.confirmLoading) return false
          this.confirmLoading = true
          deleteMemberInfo([id]).then(res => {
            this.$message.success('删除成功！')
            this.search()
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    isUpOn() {
      this.isUp = !this.isUp
      if (this.vendorList.length === 0 && this.isUp) {
        // getAllVendors().then(data => this.vendorList = data)
      }
    },
    credentialsSearch(e) {
      this.credentialType = e
      this.search()
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.customerName = undefined
      this.customerPhone = undefined
      this.customerCredentialNo = undefined
      this.channelId = undefined
      this.vendorId = undefined
      this.credentialType = undefined
      this.customerLevel = undefined
      this.search()
    },
    getData() {
		
      this.loading = true
      const {
        customerName,
        customerPhone,
        customerCredentialNo,
        channelId,
        vendorId,
        credentialType,
        customerLevel,
        rowsNum,
        pageNum
      } = this
      const params = {
        customerName,
        customerPhone,
        customerCredentialNo,
        channelId,
        vendorId,
        credentialType,
        customerLevel,
        rowsNum,
        pageNum
      }
      getPageCustomerList(this.$utils.trimValue(params)).then(res => {
        const {items, rowCount} = res
        items.forEach(e => {
          e.driverLicenseGetTime = e.driverLicenseGetTime ? moment(e.driverLicenseGetTime).format('YYYY-MM-DD') : e.driverLicenseGetTime
          e.driverLicenseEffectiveTime = e.driverLicenseEffectiveTime ? moment(e.driverLicenseEffectiveTime).format('YYYY-MM-DD') : e.driverLicenseEffectiveTime
        })
        this.data = items
        this.total = rowCount
      }).finally(() => {
        this.loading = false
      })
    },
    searchRisk(data) {
      this.$router.push({
        name: 'RiskLevelQuery',
        params: data
      })
    },
    reportRisk(data) {
      this.$router.push({
        name: 'ReportPerson',
        params: data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.filter-bar {
  display: flex;
  align-items: center;
}
</style>
